<div class="layui-layout layui-layout-admin layui-row" >
    <div class="layui-col-xs5" style="float:left;margin-left:30px;padding: 10px;border:1px solid rgb(221,221,221)">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>CPU</legend>
        </fieldset>
        <table class="layui-table" lay-even="" lay-skin="nob">

            <thead>
            <tr>
                <th>属性</th>
                <th>值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>核心数</td>
                <td id="cpu-cpuNum"><span>个</span></td>
            </tr>
            <tr>
                <td>用户使用率</td>
                <td id="cpu-used"></td>
            </tr>
            <tr>
                <td>系统使用率</td>
                <td id="cpu-sys"></td>
            </tr>
            <tr>
                <td>当前空闲率</td>
                <td id="cpu-free"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-col-xs6" style="float:right;margin-right:30px;padding: 10px;border:1px solid rgb(221,221,221)">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>内存</legend>
        </fieldset>
        <table class="layui-table" lay-even="" lay-skin="nob">

            <thead>
            <tr>
                <th>属性</th>
                <th>内存</th>
                <th>JVM</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>总内存</td>
                <td id="mem-total">0GB</td>
                <td id="jvm-total">0MB</td>
            </tr>
            <tr>
                <td>已用内存</td>
                <td id="mem-used">0GB</td>
                <td id="jvm-used">0MB</td>
            </tr>
            <tr>
                <td>剩余内存</td>
                <td id="mem-free">0GB</td>
                <td id="jvm-free">0MB</td>
            </tr>
            <tr>
                <td>使用率</td>
                <td id="mem-usage"></td>
                <td id="jvm-usage"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-col-xs5" style="float:left;margin:30px;border:1px solid rgb(221,221,221)">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>服务器信息</legend>
        </fieldset>
        <table class="layui-table" lay-even="" lay-skin="nob">

            <tbody>
            <tr>
                <td>服务器名称</td>
                <td id="sys-computerName">springboot+layui</td>
                <td>操作系统</td>
                <td id="sys-osName">linux</td>
            </tr>
            <tr>
                <td>服务器IP</td>
                <td id="sys-computerIp">127.0.0.1</td>
                <td>系统架构</td>
                <td id="sys-osArch"></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="layui-col-xs6" style="float:right;margin:30px;padding: 10px;border:1px solid rgb(221,221,221)">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>Java虚拟机</legend>
        </fieldset>
        <table class="layui-table" lay-even="" lay-skin="nob">
            <tbody>
            <tr>
                <td>Java名称</td>
                <td id="jvm-name">Java</td>
                <td>Java版本</td>
                <td id="jvm-version">1.8</td>
            </tr>
            <tr>
                <td>启动时间</td>
                <td id="jvm-startTime">2020-11-20 00:00:00</td>
                <td>运行时长</td>
                <td id="jvm-runTime">0天0时0分0秒</td>
            </tr>
            <tr>
                <td>安装路径</td>
                <td id="jvm-home"></td>
            </tr>
            <tr>
                <td>项目路径</td>
                <td id="sys-userDir"></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="layui-col-xs5" style="float:left;margin-left:30px;padding: 10px;border:1px solid rgb(221,221,221)">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>磁盘信息</legend>
        </fieldset>
        <table class="layui-table" lay-even="" lay-skin="nob">

            <thead>
            <tr>
                <th>盘符路径</th>
                <th>文件系统</th>
                <th>盘符类型</th>
                <th>总大小</th>
                <th>可用大小</th>
                <th>已用大小</th>
                <th>已用百分比</th>
            </tr>
            </thead>
            <tbody id="sysFileTBody">
            </tbody>
        </table>
    </div>
</div>

<script>
    getServer();
    function getServer() {
        AsyncGet("/server/get",null,function (data) {
            //此处因为框架选择原因没有找到比较合适的数据绑定方便，所以暂用循环的方式赋值，如果用vue的话可以直接绑定
            console.log(data);
            var obj = data.data;
            var cpu = obj.cpu;
            var mem = obj.mem;
            var sys = obj.sys;
            var jvm = obj.jvm;
            var sysFiles = obj.sysFiles;
            for(var key in cpu){
                var element = $("#cpu-"+key);
                element.text(key == "cpuNum" ? cpu[key] + " 个" : cpu[key] + " %");
            }
            for(var key in mem){
                var element = $("#mem-"+key);
                element.text(key == "usage" ? mem[key] + " %" : mem[key] + " GB");
            }
            var jvmArr = ["total","used","free"];
            for(var key in jvm){
                var element = $("#jvm-"+key);
                if(key =="usage"){
                    element.text(jvm[key] + " %");
                }else{
                    element.text(jvmArr.indexOf(key)!=-1 ? jvm[key] + " GB" : jvm[key] );
                }
            }
            for(var key in sys){
                var element = $("#sys-"+key);
                element.text(sys[key]);
            }
            var sysFileTBody = $("#sysFileTBody");
            for(var i=0;i<sysFiles.length;i++){
                var tr = $('<tr></tr>');
                for(var key in sysFiles[i]){
                    element.text(sysFiles[i][key]);
                    var e = $('<td>'+sysFiles[i][key]+'</td>');
                    tr.append(e);
                }
                sysFileTBody.append(tr)
            }

        })
    }


</script>

